{extend name="admin@public/basic" /}

{block name="style"}
<link rel="stylesheet" href="__STATIC__/css/admin/login.css" media="all">
<style>
    .layadmin-backlog-body p em {
        font-style: normal;
        font-size: 30px;
        font-weight: 300;
        color: #009688 !important;
    }

    .layadmin-backlog-body cite {
        padding-bottom: 10px;
        font-size: 12px;
        font-weight: 500;
        color: #333;
    }
    .layadmin-backlog-body p em {
        font-style: normal;
        font-size: 30px;
        font-weight: 300;
        color: #0f4c81 !important;
    }

    .layadmin-backlog-body cite {
        padding-bottom: 10px;
        font-size: 12px;
        font-weight: 500;
        color: #333;
    }
    .bg_6b5af4{
        background-size: auto 100%;
        background-position: right bottom;
        background-repeat: no-repeat;
        border: solid #DEDEDE 1px;
    }

    .width_33{
        width:25%;
    }
    .statistic{ color: rgba(100, 93, 93, 1);margin-top: 20px;margin-bottom: 0px; }
    .statistic .bg_block { border-radius: 8px;padding: 20px 15px; }
    .statistic .title{ font-size: 20px; }
    .statistic .total_statistic{ font-size: 20px;text-align: center;margin: 10px 0; }
    .statistic .today_statistic{ font-size: 14px;opacity: 0.8; }
    .card_border_radius{ border-radius: 8px; }
    .echarts_title{ font-size: 16px;font-weight: bold; padding: 20px 5px 15px; }
</style>
{/block}

{block name="cotent"}
<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            {$data.today}晴
        </div>

    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md8">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">数据统计</div>
                        <div class="layui-card-body layui-text" style="height: 200px">
                            <div class="layui-carousel layadmin-carousel layadmin-backlog carousel">
                                <ul class="layui-row layui-col-space15 statistic">


                                    <li class="layui-col-xs2 width_33">
                                        <div class="bg_block bg_6b5af4">
                                            <span class="title">用户<i class="layui-icon layui-icon-about" style="font-size: 20px; color: #DEDEDE;"data-d="用户总数" onmouseover="show_shopm(this)"></i></span>
                                            <p class="total_statistic">{$data.total_user}</p>
                                            <span class="today_statistic">今日新增：{$data.today_user}</span>
                                        </div>
                                    </li>

                                    <li class="layui-col-xs2 width_33">
                                        <div class="bg_block bg_6b5af4">
                                            <span class="title">企业<i class="layui-icon layui-icon-about" style="font-size: 20px; color: #DEDEDE;"data-d="企业总数" onmouseover="show_shopm(this)"></i></span>
                                            <p class="total_statistic">{$data.total_company}</p>
                                            <span class="today_statistic">今日新增：{$data.today_company}</span>
                                        </div>
                                    </li>

                                    <li class="layui-col-xs2 width_33">
                                        <div class="bg_block bg_6b5af4">
                                            <span class="title">设备<i class="layui-icon layui-icon-about" style="font-size: 20px; color: #DEDEDE;"data-d="设备总数" onmouseover="show_shopm(this)"></i></span>
                                            <p class="total_statistic">{$data.total_device}</p>
                                            <span class="today_statistic">今日安装：{$data.today_device}</span>
                                        </div>
                                    </li>
                                    <li class="layui-col-xs2 width_33">
                                        <div class="bg_block bg_6b5af4">
                                            <span class="title">收入<i class="layui-icon layui-icon-about" style="font-size: 20px; color: #DEDEDE;"data-d="总收入" onmouseover="show_shopm(this)"></i></span>
                                            <p class="total_statistic">{$data.total_income}</p>
                                            <span class="today_statistic">今日收入：{$data.today_income}</span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">用户</div>
                            <div class="layui-card-body">
                                <div id="articleCensus" style="width: 100%;height:200px"></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">设备</div>
                            <div class="layui-card-body">
                                <div id="articleCensus2" style="width: 100%;height:200px"></div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="layui-col-md4">
            <div class="layui-card">
                    <div class="layui-tab layui-tab-brief layadmin-latestData">
                        <ul class="layui-tab-title">
                            <li class="layui-this">最近新增企业</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <table class="layui-table">
                                    <colgroup>
                                        <col width="40%">
                                        <col width="60%">
                                    </colgroup>
                                    <tbody>
                                    {volist name="data.new_company" id="v"}
                                    <tr>
                                        <td>{$v.company_name}</td>
                                        <td>{$v.company_addr}</td>
                                    </tr>
                                    {/volist}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            <div class="layui-card">
                <div class="layui-tab layui-tab-brief layadmin-latestData">
                    <ul class="layui-tab-title">
                        <li class="layui-this">设备数排行</li>
                        <li>服务费排行</li>
                        <li>用户数排行</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <table class="layui-table">
                                <colgroup>
                                    <col width="50%">
                                    <col width="50%">
                                </colgroup>
                                <tbody>
                                <tr>
                                    <td>企业名称</td>
                                    <td>设备数/台</td>
                                </tr>
                                {volist name="data.rank_device" id="v"}
                                <tr>
                                    <td>{$v.company_name}</td>
                                    <td>{$v.num}</td>
                                </tr>
                                {/volist}

                                </tbody>
                            </table>
                        </div>
                        <div class="layui-tab-item">
                            <table class="layui-table">
                                <colgroup>
                                    <col width="50%">
                                    <col width="50%">
                                </colgroup>
                                <tbody>
                                <tr>
                                    <td>企业名称</td>
                                    <td>服务费/元</td>
                                </tr>

                                {volist name="data.rank_charge" id="v"}
                                <tr>
                                    <td>{$v.company_name}</td>
                                    <td>{$v.num}</td>
                                </tr>
                                {/volist}

                                </tbody>
                            </table>
                        </div>
                        <div class="layui-tab-item">
                            <table class="layui-table">
                                <colgroup>
                                    <col width="50%">
                                    <col width="50%">
                                </colgroup>
                                <tbody>
                                <tr>
                                    <td>企业名称</td>
                                    <td>用户数/人</td>
                                </tr>

                                {volist name="data.rank_user" id="v"}
                                <tr>
                                    <td>{$v.company_name}</td>
                                    <td>{$v.num}</td>
                                </tr>
                                {/volist}

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>





        </div>

    </div>

</div>
{/block}

{block name="script"}

<script type="text/javascript" src="__STATIC__/js/admin/echarts/echarts.min.js"></script>
<script type="text/javascript">
    layui.use('element', function() {
        var element = layui.element;
        element.init();  //layUI ajax加载html页面后渲染，关键在将html插到指定位置后重新调用element.init();渲染


    });

    layui.use('carousel', function(){
        var carousel = layui.carousel;
        var oDiv = $(".carousel");
        $.each(oDiv,(index,value)=>{
            //console.log('index,value',index,value);
            //建造实例
            carousel.render({
                elem: $(value)
                ,width: '100%' //设置容器宽度
                ,arrow: 'none' //始终显示箭头
                //,anim: 'updown' //切换动画方式
            });
        })


    });
    var  user_sexs = [];
    user_sexs.push({name: '男', value:{$data.male}});
    user_sexs.push({name: '女', value: {$data.female}});

    // 基于准备好的dom，初始化echarts实例
    var articleChart = echarts.init(document.getElementById('articleCensus'));
    var articleOption = {
        title: {
            text: '',
            subtext: '',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        /*legend: {
            left:'1px',
            top: '10px',
            orient: 'vertical',
            data:work_status
        },*/
        legend: {
            orient: 'vertical',
            left: 'left',
            data:'已完成',
        },
        color:['yellow', 'pink'],
        series: [
            {
                name: '面积模式',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: user_sexs,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    articleChart.setOption(articleOption);

    var  device = [];
    device.push({name: '在线', value: 20});
    device.push({name: '离线', value: 70});

    // 基于准备好的dom，初始化echarts实例
    var articleChart2 = echarts.init(document.getElementById('articleCensus2'));
    var articleOption2 = {
        title: {
            text: '',
            subtext: '',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        /*legend: {
            left:'1px',
            top: '10px',
            orient: 'vertical',
            data:work_status
        },*/
        legend: {
            orient: 'vertical',
            left: 'left',
            data:'已完成',
        },
        color:['blue', 'red'],
        series: [
            {
                name: '面积模式',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: device,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    articleChart2.setOption(articleOption2);


    //提示语
    function show_shopm(t) {
        var row = $(t).attr('data-d'); //获取显示内容
        //小tips
        layer.tips(row, t, {
            tips: [1, '#3773ca'],
            time: 4000
        })
    }


</script>
{/block}